
<template>
<div>

  <el-row type="flex" class="row-bg">

 
  <el-col :span="10" :offset="1">
      保险责任项：
  <el-cascader
    :options="options"    
    v-model="dataitemname"
   
   >
  </el-cascader>
    <el-button  type="primary" style="margin-left:50px;" @click="additem" >添加</el-button>
  </el-col>

  </el-row>
  
 <div class="space20">
 </div>
<el-collapse v-if="stylelist.length>0" >
  <el-collapse-item :title="data.show" :key="data.show" v-for="data in stylelist ">
 
  <el-card class="box-card" >
  <div slot="header" class="card-heaer">
    <span style="line-height: 36px;">{{data.show}}</span>    
    <el-button style="float: right; margin-right:50px;" type="danger" @click="delectdata(data,data.id)" >删除</el-button>
  <el-button style="float: right; margin-right:50px;" type="primary" @click="addlistitem(data.fid,data.id)" >新增一条</el-button>
  </div>
   <el-form :model="item"  label-width="130px" ref="item"  :inline="true" class="demo-ruleForm"  :key="item.BILL_DATA_ID"  v-for="(item,index) in even(list,data.id)">

        
  <el-form-item label="项目代码"
   v-if="data.id!='201705110926265811'"
    :prop="'BILL_DATA_DETAIL_CODE'"
    :rules="{
      required: data.id!='201705110926265811', message: '项目代码不能为空', trigger: 'blur'
    }"
  >
  
    <el-input v-model="item.BILL_DATA_DETAIL_CODE"></el-input>
  </el-form-item>
   <el-form-item label="项目名称"
   :prop="'BILL_DATA_DETAIL_ZNAME'"
    :rules="{
      required: true, message: '项目名称不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="item.BILL_DATA_DETAIL_ZNAME"></el-input>
  </el-form-item>
    <el-form-item label="项目名称(英文)"
    v-if="data.id!='201705110926265811'"
   :prop="'BILL_DATA_DETAIL_ENAME'"
    :rules="{
      required: data.id!='201705110926265811', message: '英文名称不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="item.BILL_DATA_DETAIL_ENAME"></el-input>
  </el-form-item>
   <el-form-item label="项目描述"
     v-if="data.id!='201705110926265811'"
    :prop="'BILL_DATA_DETAIL_DETIAL'"
    :rules="{
      required: data.id!='201705110926265811', message: '项目描述不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="item.BILL_DATA_DETAIL_DETIAL"></el-input>
  </el-form-item>
   <el-form-item label="项目描述(英文)"
     v-if="data.id!='201705110926265811'"
    :prop="'BILL_DATA_DETAIL_EDETIAL'"
    :rules="{
      required: data.id!='201705110926265811', message: '项目描述不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="item.BILL_DATA_DETAIL_EDETIAL"></el-input>
  </el-form-item>
  
  <el-form-item label="项目单价"
    v-if="data.id!='201705110926265811'"
    :prop="'BILL_DATA_DETAIL_PMONEY'"
    :rules="{
      required: data.id!='201705110926265811',  message: '项目单价不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="item.BILL_DATA_DETAIL_PMONEY" ></el-input>
  </el-form-item>
  <el-form-item label="项目数量"
    v-if="data.id!='201705110926265811'"
    :prop="'BILL_DATA_DETAIL_COUNT'"
    :rules="{
      required: data.id!='201705110926265811',message: '项目数量不能为空', trigger: 'blur'
    }"
  >
    <el-input v-model="item.BILL_DATA_DETAIL_COUNT"  ></el-input>
  </el-form-item>
   <el-form-item label="项目费用" v-if="item.BILL_DATA_DETAIL_COUNT!='' && item.BILL_DATA_DETAIL_PMONEY!='' && data.id!='201705110926265811'"
    :prop="'BILL_DATA_DETAIL_CMONEY'"
    
  >
  <!--{{item.BILL_DATA_DETAIL_COUNT*item.BILL_DATA_DETAIL_PMONEY}}-->
    <el-input v-model="item.BILL_DATA_DETAIL_CMONEY" :disabled="true"></el-input>
  </el-form-item>
  
  </el-form-item>
   
    
   
      <el-button style="float: right; margin-right:50px;" type="danger" @click="delectitem(item)" >删除</el-button>
 
   </el-form>
  </el-card>
  </el-collapse-item>
</el-collapse>

</div>
</template>
<script>
    import {
        mapState
    } from 'vuex';
    // import liepeiup_item from '@/components/liepeiup_item';
    import getid from '@/js/getid';
    export default {
        props: {
            billdataid: {
                type: String,
                default: ""
            }

  },
  watch: {
    list: {
        handler: function (val,oldval) {
          if(val.length<0){
              return;
          }
         
          for(var i=0;i<val.length;i++){
             this.list[i].BILL_DATA_DETAIL_CMONEY=this.list[i].BILL_DATA_DETAIL_COUNT*this.list[i].BILL_DATA_DETAIL_PMONEY
          }

        },
        deep: true
    }
},
        data() {
            return {
                dataitemname: [], //下列列表数据
                dataitem: [], //类型数据
                options: [], //下列列表数据源
                namevalue: "", //选择的数据名称
                stylelist: [],
                list: [], //BILL_DATA_DETAIL
                BILL_DATA_HNAME:"",
                BILL_DATA_TYPE:""
                    // bill:[]//最终账单数据

            };
        },
        computed: mapState({
            bill: state => state.bill.bill
        }),
        methods: {
            even: function(numbers, key) {
                return numbers.filter(function(number) {
                 

                    if (number.DUTYITEM_ID == key) {
                        return number;
                    }

                })
            },
            delectdata(item, id) {
                //删除条，删除list中 id相同数据
             
                var index = this.stylelist.indexOf(item)
                if (index !== -1) {
                    this.stylelist.splice(index, 1)
                }
                var arry = [];
                for (var i = 0; i < this.list.length; i++) {
                    if (this.list[i].DUTYITEM_ID != id) {
                        arry.push(this.list[i])

                    }
                }
                this.list = arry;
              
                for (var i = 0; i < this.bill.length; i++) {
                    if (this.bill[i].BILL_DATA_ID == this.billdataid) {
                        this.bill[i].BILL_DATA_DETAIL = this.list;

                    } else {
                      
                    }
                }
             
            },
            delectitem(item) {
              
                var index = this.list.indexOf(item)
                if (index !== -1) {
                    this.list.splice(index, 1)
                }
            },
            additem() {
                if (this.dataitemname.length == 0) {
                    this.$alert('请先选择责任项', '提示', {
                        confirmButtonText: '确定',
                    });
                } else {
               
                    var findex = this.dataitemname[0];
                    this.getvalue();
                    this.stylelist.push({
                        show: this.namevalue,
                        id: this.dataitemname[1],
                        fid:this.dataitemname[0]
                    });
                    this.dataitemname = [];
                  
                }

            },
            addlistitem(fid,id) {
                this.list.push({
                    BILL_DATA_DETAIL_ID: getid.getid(),
                    BILL_DATA_ID: this.billdataid,
                    BILL_DATA_DETAIL_ENAME: "",
                    BILL_DATA_DETAIL_ZNAME: "",
                    BILL_DATA_DETAIL_MONEY: "",
                    BILL_DATA_DETAIL_STATE: "正常",
                    BILL_DATA_DETAIL_RELATION: "是",  
                    BILL_DATA_DETAIL_COUNT:0,
                    BILL_DATA_DETAIL_PMONEY:0,
                    BILL_DATA_DETAIL_EDETIAL:"",
                    BILL_DATA_DETAIL_CMONEY:0,
                    DUTYITEM_ID: id,
                    DUTYITEM_FID:fid
                })
            },
            getvalue() {
                for (var i = 0; i < this.options.length; i++) {
                    if (this.options[i].value == this.dataitemname[0]) {
                      
                        this.namevalue = this.options[i].label + "-";
                        for (var k = 0; k < this.options[i].children.length; k++) {
                            if (this.options[i].children[k].value == this.dataitemname[1]) {
                                this.namevalue += this.options[i].children[k].label;
                             
                                return;

                            }
                        }

                    }
                }
            }
        },
        created() {
            for (var i = 0; i < this.bill.length; i++) {
                if (this.bill[i].BILL_DATA_ID == this.billdataid) {
                    this.list = this.bill[i].BILL_DATA_DETAIL;

                } else {
                   
                }
            }
            this.$http.get("DutyItem").then(response => {
                var data = response.body;
             
                this.options = data;
            }, response => {
                this.$notify.error({
                    title: '网络错误',
                    message: '网络错误'
                });
                this.loding = false;
            });

        }

    }
</script>